<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<comp-quick-navigation v-bind="{data:data}" @cutover="cutover" @map_power="map_power" @to_dial="to_dial" @openWxapp="openWxapp"></comp-quick-navigation>
			<view class="body">
				<get-coupon v-bind="{data:data}" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox"></get-coupon>
				<specifications-model v-bind="{data:data}" @previewImage="previewImage" @hideAttrPicker="hideAttrPicker" @groupCheck="groupCheck" @attrNumClick="attrNumClick" @dappAttrClick="dappAttrClick" @numberSub="numberSub" @numberBlur="numberBlur" @numberAdd="numberAdd"></specifications-model>
        <view :class="[data.show_attr_picker?'no-scroll':'', data.pt_detail?'pt-modal-bj':'']">
					<goods-banner v-bind="{data:data}" @hide="hide" @onGoodsImageClick="onGoodsImageClick" @play="play"></goods-banner>
            <view class="time-limit flex-row" v-if="data.goods.limit_time>0">
                <view class="flex-grow-0 flex-y-center flex-x-center">
                    <image :src="data.__wxapp_img.pt.details.url"></image>
                </view>
                <view class="flex-grow-1 flex-col flex-x-center time-limit-logo-text">
                    <view class="flex-grow-0">
                        限时火拼
                    </view>
                    <view class="flex-grow-0" style="margin-left:50upx;">
                        超值低价
                    </view>
                </view>
                <view class="flex-grow-1 flex-col flex-y-center flex-x-center">
                    <view class="flex-grow-0 time-top-text">
                        距离结束时间剩
                    </view>
                    <view class="flex-grow-0 flex-row time-info flex-y-center">
                        <view class="flex-grow-1 time-value flex-y-center flex-x-center">
                            {{data.limit_time.days}}
                        </view>
                        <view class="flex-grow-0">
                            天
                        </view>
                        <view class="flex-grow-1 time-value flex-y-center flex-x-center">
                            {{data.limit_time.hours}}
                        </view>
                        <view class="flex-grow-0">
                            时
                        </view>
                        <view class="flex-grow-1 time-value flex-y-center flex-x-center">
                            {{data.limit_time.mins}}
                        </view>
                        <view class="flex-grow-0">
                            分
                        </view>
                        <view class="flex-grow-1 time-value flex-y-center flex-x-center">
                            {{data.limit_time.secs}}
                        </view>
                        <view class="flex-grow-0">
                            秒
                        </view>
                    </view>
                </view>
            </view>
						<goods-info v-bind="{data:data}" @showDialogBtn="showDialogBtn" @jian="jian" @goodNumChange="goodNumChange" @jia="jia" @showShareModal="showShareModal" @showAttrPicker="showAttrPicker" @getGoodsQrcode="getGoodsQrcode" @shareModalClose="shareModalClose" @close="close" @goodsQrcodeClick="goodsQrcodeClick" @saveGoodsQrcode="saveGoodsQrcode" @goodsQrcodeClose="goodsQrcodeClose" @onShareWebMessage="onShareWebMessage"></goods-info>
            <view class="friend-group">
                <view @tap="goArticle" class="pt-goods-rule flex-row flex-y-center">
                    <view class="pt-rule-title flex-grow-1 flex-y-center">
                        支付商品开团，邀请好友参与，成功发货失败退款
                    </view>
                    <view class="pt-rule-right flex-grow-0 flex-y-center">
                        详细规则
                    </view>
                    <view class="pt-rule-more flex-grow-0 flex-y-center">
                        <image :src="data.__wxapp_img.share.right.url"></image>
                    </view>
                </view>
            </view>
            <view class="friend-group" style="padding-bottom:10upx" v-if="data.group_num>0">
                <view class="flex-y-center">
                    <view class="friend-group-title flex-row  flex-grow-1">
                        以下小伙伴正在发起拼团，您可以直接参与:
                    </view>
                    <view @tap="more" class="pt-rule-right flex-grow-0 flex-y-center">
                        更多
                    </view>
                    <view class="pt-rule-more flex-grow-0 flex-y-center">
                        <image :src="data.__wxapp_img.share.right.url"></image>
                    </view>
                </view>
                <view class="friend-group-item flex-row flex-y-center" v-if="index<3" v-for="(item,index) in data.group_list" :key="item.id">
                    <view class="friend-corver-pic flex-grow-0 flex-y-center">
                        <image :src="item.avatar_url"></image>
                    </view>
                    <view class="friend-name flex-grow-1 flex-y-center">
                        {{item.nickname}}
                    </view>
                    <view class="flex-grow-0 flex-col">
                        <view class="flex-grow-0 group-short" style="text-align:right">
                            还差{{item.surplus}}人成团
                        </view>
                        <view class="flex-grow-0 group-short-time">
                            还剩 {{item.limit_time.days}}:{{item.limit_time.hours}}:{{item.limit_time.mins}}:{{item.limit_time.secs}}
                        </view>
                    </view>
                    <view @tap="goToGroup" class="flex-grow-0 go-offered flex-y-center flex-x-center" :data-id="item.id">
                        去参团
                    </view>
                </view>
            </view>
            <view class="goods-comment" v-if="data.__is_comment">
                <view @tap="goToComment" class="goods-comment-title flex-row flex-y-center">
                    <view class="comment-left-text flex-grow-1 flex-y-center">
                        买家评论{{data.comment_num}}
                        <text style="margin-left:10upx;" v-if="data.__is_sales">| 销量 {{data.goods.virtual_sales}}</text>
                    </view>
                    <view class="comment-more flex-grow-0 flex-y-center">
                        <image :src="data.__wxapp_img.share.right.url"></image>
                    </view>
                </view>
                <view class="goods-comment-item flex-col" v-for="(item,ckey) in data.comment" :key="item.id">
                    <view class="goods-comment-user flex-grow-0 flex-row flex-y-center">
                        <view class="comment-user-pic flex-grow-0">
                            <image :src="item.avatar_url"></image>
                        </view>
                        <view class="comment-user-name flex-grow-0">
                            {{item.nickname}}
                        </view>
                    </view>
                    <view class="goods-comment-conent flex-grow-1">
                        {{item.content}}
                    </view>
                    <view class="goods-comment-ginfo">
                        {{item.addtime}}
                        <block v-for="(attr,i) in item.attr" :key="i">
                            {{attr.attr_group_name}}:{{attr.attr_name}}
                        </block>
                    </view>
                    <view class="goods-comment-piclist">
                        <view class="comment-pic-shell" v-for="(pic,i) in item.pic_list" :key="i">
                            <image @tap="bigToImage" :data-index="ckey" :data-url="pic" mode="aspectFit" :src="pic" style="width:160upx;height:160upx"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="pt-goods-content">
                <view class="pt-goods-content-title flex-y-center">
                    商品详情
                </view>
                <view class="pt-goods-details">
									<wx-parse :myNodes="data.detail.nodes"></wx-parse>
                </view>
            </view>
						<goods-buy v-bind="{data:data}" @goHome="goHome" @favoriteRemove="favoriteRemove" @favoriteAdd="favoriteAdd" @kfMessage="kfMessage" @callPhone="callPhone" @addCart="addCart" @buyNow="buyNow" @bespeakNow="bespeakNow" @onlyBuy="onlyBuy"></goods-buy>
        </view>
        <view class="model-award" v-if="data.pt_detail">
            <view class="act-modal show">
                <view class="act-modal-bg"></view>
                <view class="act-modal-pic flex-y-center flex-x-center">
                    <view class="pt-modal">
                        <view class="pt-modal-1">正在拼团</view>
                        <view class="pt-modal-2">仅显示10条正在拼团信息</view>
                        <view class="pt-modal-3"></view>
                        <view class="pt-modal-4">
                            <image @tap="end_more" src="/static/images/pond-details.png"></image>
                        </view>
                        <view class="pt-modal-5">
                            <scroll-view scrollY @scroll="scroll" @scrolltolower="lower" @scrolltoupper="upper" :scrollIntoView="data.toView" style="height: 500upx;">
                                <view class="flex-row pt-modal-6" v-for="(item,index) in data.group_list" :key="item.id">
                                    <view class="flex-grow-0 flex-y-center flex-x-center pt-modal-7">
                                        <image :src="item.avatar_url"></image>
                                    </view>
                                    <view class="flex-col flex-grow-1 flex-x-center" style="text-align:left;">
                                        <view style="color:#353535;">{{item.nickname}}
                                            <text style="color:#ff5c5c;font-size:9pt;margin-left:20upx">还差{{item.surplus}}人</text>
                                        </view>
                                        <view style="color:#707070;font-size:9pt">剩余{{item.limit_time.days}}:{{item.limit_time.hours}}:{{item.limit_time.mins}}:{{item.limit_time.secs}}</view>
                                    </view>
                                    <view @tap="goToGroup" class="flex-grow-0 go-offered flex-y-center flex-x-center" :data-id="item.id" style="margin-left:0upx;font-size:11pt">去参团</view>
                                </view>
                            </scroll-view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = require("../../../utils/helper.js"), e = require("../../../wxParse/wxParse.js"), a = require("../../../components/goods/specifications_model.js"), i = require("../../../components/goods/goods_banner.js"), r = require("../../../components/goods/goods_info.js"), o = require("../../../components/goods/goods_buy.js");
	import getCoupon from '../../../components/common/get-coupon.vue'
	import specificationsModel from '../../../components/goods/specifications_model.vue'
	import goodsBanner from '../../../components/goods/goods_banner.vue'
	import goodsInfo from '../../../components/goods/goods_info.vue'
	import goodsBuy from '../../../components/goods/goods_buy.vue'
	export default {
		components:{getCoupon,specificationsModel,goodsBanner,goodsInfo,goodsBuy},
		data() {
			return {
				data: {
        pageType: "PINTUAN",
        hide: "hide",
        form: {
            number: 1,
            pt_detail: !1
        },
				detail: {},
				goods: {}
    },
			};
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e);
        var a = e.user_id, i = decodeURIComponent(e.scene);
        if (void 0 !== a) a; else if (void 0 !== i) {
            var r = t.scene_decode(i);
            r.uid && r.gid ? (r.uid, e.gid = r.gid) : i;
        } else if ("undefined" != typeof my && null !== myVue.getApp.query) {
            var o = myVue.getApp.query;
            myVue.getApp.query = null, e.id = o.gid;
        }
        this.setData({
            id: e.gid,
            oid: e.oid ? e.oid : 0,
            group_checked: e.group_id ? e.group_id : 0
        }), this.getGoodsInfo(e);
        var s = myVue.getApp.core.getStorageSync(myVue.getApp.const.DAPP);
        this.setData({
            dapp: s
        });
    },
    onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this), a.init(this), i.init(this), r.init(this), o.init(this);
    },
    onHide: function() {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function() {
        myVue.getApp.page.onUnload(this), myVue.getApp.core.removeStorageSync(myVue.getApp.const.PT_GROUP_DETAIL);
    },
    onPullDownRefresh: function() {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function() {
        myVue.getApp.page.onReachBottom(this);
    },
    onShareAppMessage: function() {
        myVue.getApp.page.onShareAppMessage(this);
        var t = this, e = myVue.getApp.core.getStorageSync(myVue.getApp.const.USER_INFO), a = "/pages/pt/details/details?gid=" + t.data.goods.id + "&user_id=" + e.id;
        return {
            title: t.data.goods.name,
            path: a,
            imageUrl: t.data.goods.cover_pic,
            success: function(t) {}
        };
    },
		methods: {
			getGoodsInfo: function(t) {
        var a = t.gid, i = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.core.showNavigationBarLoading(), myVue.getApp.request({
            url: myVue.getApp.api.group.details,
            method: "get",
            data: {
                gid: a
            },
            success: function(t) {
                if (0 == t.code) {
                    i.countDownRun(t.data.info.limit_time_ms);
                    var a = t.data.info.detail;
                    e.wxParse("detail", "html", a, i), i.getApp.core.setNavigationBarTitle({
                        title: t.data.info.name
                    }), i.getApp.core.hideNavigationBarLoading();
                    var r = (t.data.info.original_price - t.data.info.price).toFixed(2), o = t.data.info;
                    o.service_list = t.data.info.service, i.setData({
                        group_checked: i.data.group_checked ? i.data.group_checked : 0,
                        goods: o,
                        attr_group_list: t.data.attr_group_list,
                        attr_group_num: t.data.attr_group_num,
                        limit_time: t.data.limit_time_res,
                        group_list: t.data.groupList,
                        group_num: t.data.groupList.length,
                        group_rule_id: t.data.groupRuleId,
                        comment: t.data.comment,
                        comment_num: t.data.commentNum,
                        reduce_price: r < 0 ? 0 : r
                    }), i.countDown(), i.selectDefaultAttr();
                } else i.getApp.core.showModal({
                    title: "提示",
                    content: t.msg,
                    showCancel: !1,
                    success: function(t) {
                        t.confirm && i.getApp.core.redirectTo({
                            url: "/pages/pt/index/index"
                        });
                    }
                });
            },
            complete: function(t) {
                i.getApp.core.hideLoading();
            }
        });
    },
    more: function() {
        this.setData({
            pt_detail: !0
        });
    },
    end_more: function() {
        this.setData({
            pt_detail: !1
        });
    },
    previewImage: function(t) {
        var e = t.currentTarget.dataset.url;
        myVue.getApp.core.previewImage({
            urls: [ e ]
        });
    },
    selectDefaultAttr: function() {
        var t = this;
        if (!t.data.goods || "0" === t.data.goods.use_attr) for (var e in t.data.attr_group_list) for (var a in t.data.attr_group_list[e].attr_list) 0 == e && 0 == a && (t.data.attr_group_list[e].attr_list[a].checked = !0);
        t.setData({
            attr_group_list: t.data.attr_group_list
        });
    },
    countDownRun: function(t) {
        var e = this;
        setInterval(function() {
            var a = new Date(t[0], t[1] - 1, t[2], t[3], t[4], t[5]) - new Date(), i = parseInt(a / 1e3 / 60 / 60 / 24, 10), r = parseInt(a / 1e3 / 60 / 60 % 24, 10), o = parseInt(a / 1e3 / 60 % 60, 10), s = parseInt(a / 1e3 % 60, 10);
            i = e.checkTime(i), r = e.checkTime(r), o = e.checkTime(o), s = e.checkTime(s), 
            e.setData({
                limit_time: {
                    days: i < 0 ? "00" : i,
                    hours: r < 0 ? "00" : r,
                    mins: o < 0 ? "00" : o,
                    secs: s < 0 ? "00" : s
                }
            });
        }, 1e3);
    },
    checkTime: function(t) {
        return t < 0 ? "00" : (t < 10 && (t = "0" + t), t);
    },
    goToGroup: function(t) {
        myVue.getApp.core.navigateTo({
            url: "/pages/pt/group/details?oid=" + t.target.dataset.id
        });
    },
    goToComment: function(t) {
        myVue.getApp.core.navigateTo({
            url: "/pages/pt/comment/comment?id=" + this.data.goods.id
        });
    },
    goArticle: function(t) {
        this.data.group_rule_id && myVue.getApp.core.navigateTo({
            url: "/pages/article-detail/article-detail?id=" + this.data.group_rule_id
        });
    },
    buyNow: function() {
        this.submit("GROUP_BUY", this.data.group_checked);
    },
    onlyBuy: function() {
        this.submit("ONLY_BUY", 0);
    },
    submit: function(t, e) {
        var a = this, i = "GROUP_BUY" == t;
        if (!a.data.show_attr_picker || i != a.data.groupNum) return a.setData({
            show_attr_picker: !0,
            groupNum: i
        }), !0;
        if (a.data.form.number > a.data.goods.num) return myVue.getApp.core.showToast({
            title: "商品库存不足，请选择其它规格或数量",
            image: "/static/images/icon-warning.png"
        }), !0;
        var r = a.data.attr_group_list, o = [];
        for (var s in r) {
            var n = !1;
            for (var d in r[s].attr_list) if (r[s].attr_list[d].checked) {
                n = {
                    attr_id: r[s].attr_list[d].attr_id,
                    attr_name: r[s].attr_list[d].attr_name
                };
                break;
            }
            if (!n) return myVue.getApp.core.showToast({
                title: "请选择" + r[s].attr_group_name,
                image: "/static/images/icon-warning.png"
            }), !0;
            o.push({
                attr_group_id: r[s].attr_group_id,
                attr_group_name: r[s].attr_group_name,
                attr_id: n.attr_id,
                attr_name: n.attr_name
            });
        }
        a.setData({
            show_attr_picker: !1
        });
        var p = 0;
        a.data.oid && (t = "GROUP_BUY_C", p = a.data.oid), myVue.getApp.core.redirectTo({
            url: "/pages/pt/order-submit/order-submit?goods_info=" + JSON.stringify({
                goods_id: a.data.goods.id,
                attr: o,
                num: a.data.form.number,
                type: t,
                deliver_type: a.data.goods.type,
                group_id: e,
                parent_id: p
            })
        });
    },
    countDown: function() {
        var t = this;
        setInterval(function() {
            var e = t.data.group_list;
            for (var a in e) {
                var i = new Date(e[a].limit_time_ms[0], e[a].limit_time_ms[1] - 1, e[a].limit_time_ms[2], e[a].limit_time_ms[3], e[a].limit_time_ms[4], e[a].limit_time_ms[5]) - new Date(), r = parseInt(i / 1e3 / 60 / 60 / 24, 10), o = parseInt(i / 1e3 / 60 / 60 % 24, 10), s = parseInt(i / 1e3 / 60 % 60, 10), n = parseInt(i / 1e3 % 60, 10);
                r = t.checkTime(r), o = t.checkTime(o), s = t.checkTime(s), n = t.checkTime(n), 
                e[a].limit_time = {
                    days: r,
                    hours: o > 0 ? o : "00",
                    mins: s > 0 ? s : "00",
                    secs: n > 0 ? n : "00"
                }, t.setData({
                    group_list: e
                });
            }
        }, 1e3);
    },
    bigToImage: function(t) {
        var e = this.data.comment[t.target.dataset.index].pic_list;
        myVue.getApp.core.previewImage({
            current: t.target.dataset.url,
            urls: e
        });
    },
    groupCheck: function() {
        var t = this, e = t.data.attr_group_num, a = t.data.attr_group_num.attr_list;
        for (var i in a) a[i].checked = !1;
        e.attr_list = a;
        t.data.goods;
        t.setData({
            group_checked: 0,
            attr_group_num: e
        });
        var r = t.data.attr_group_list, o = [], s = !0;
        for (var i in r) {
            var n = !1;
            for (var d in r[i].attr_list) if (r[i].attr_list[d].checked) {
                o.push(r[i].attr_list[d].attr_id), n = !0;
                break;
            }
            if (!n) {
                s = !1;
                break;
            }
        }
        s && (myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.group.goods_attr_info,
            data: {
                goods_id: t.data.goods.id,
                group_id: t.data.group_checked,
                attr_list: JSON.stringify(o)
            },
            success: function(e) {
                if (t.getApp.core.hideLoading(), 0 == e.code) {
                    var a = t.data.goods;
                    a.price = e.data.price, a.num = e.data.num, a.attr_pic = e.data.pic, a.single_price = e.data.single_price ? e.data.single_price : 0, 
                    a.group_price = e.data.price, a.is_member_price = e.data.is_member_price, t.setData({
                        goods: a
                    });
                }
            }
        }));
    },
    attrNumClick: function(t) {
        var e = this, a = t.target.dataset.id, i = e.data.attr_group_num, r = i.attr_list;
        for (var o in r) r[o].id == a ? r[o].checked = !0 : r[o].checked = !1;
        i.attr_list = r, e.setData({
            attr_group_num: i,
            group_checked: a
        });
        var s = e.data.attr_group_list, n = [], d = !0;
        for (var o in s) {
            var p = !1;
            for (var g in s[o].attr_list) if (s[o].attr_list[g].checked) {
                n.push(s[o].attr_list[g].attr_id), p = !0;
                break;
            }
            if (!p) {
                d = !1;
                break;
            }
        }
        d && (myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.group.goods_attr_info,
            data: {
                goods_id: e.data.goods.id,
                group_id: e.data.group_checked,
                attr_list: JSON.stringify(n)
            },
            success: function(t) {
                if (e.getApp.core.hideLoading(), 0 == t.code) {
                    var a = e.data.goods;
                    a.price = t.data.price, a.num = t.data.num, a.attr_pic = t.data.pic, a.single_price = t.data.single_price ? t.data.single_price : 0, 
                    a.group_price = t.data.price, a.is_member_price = t.data.is_member_price, e.setData({
                        goods: a
                    });
                }
            }
        }));
    },
    onShareWebMessage: function() {
        myVue.getApp.page.onShareAppMessage(this);
        var t = this, e = myVue.getApp.core.getStorageSync(myVue.getApp.const.USER_INFO), a = "/pages/pt/details/details?gid=" + t.data.goods.id + "&user_id=" + e.id;
				this.$webShare({
					title: t.data.goods.name,
					path: a,
					imageUrl: t.data.goods.cover_pic
				}).then(function() {
					
				})
    },
		},
	}
</script>

<style scoped>

.time-limit {
    height: 88upx;
    background-color: #ffa360;
    background: -webkit-gradient(linear,left top,right bottom,color-stop(0%,#ff5527),color-stop(0%,#ff2755));
    background-image: linear-gradient(140deg,#ffa360,#ff5c5c);
    padding: 0 24upx;
}

.time-limit image {
    width: 112upx;
    height: 56upx;
    margin-right: 20upx;
}

.time-limit-logo-text {
    font-size: 9pt;
    color: #ffffff;
}

.time-top-text {
    font-size: 7pt;
    color: #ffeecc;
    margin-bottom: 5upx;
}

.time-info {
    color: #ffffff;
    font-size: 24upx;
    line-height: 1;
}

.time-value {
    background-color: #ffffff;
    border-radius: 5upx;
    color: #3f3f3f;
    font-size: 24upx;
    text-align: center;
    margin: 0 6upx;
    padding: 9upx 8upx;
}

button::after {
    content: normal!important;
}

.goods-service {
    padding: 20upx 24upx;
    flex-wrap: wrap;
}

.service-item {
    padding-right: 20upx;
    font-size: 9pt;
    line-height: 1;
    height: 40upx;
}

.service-item image {
    width: 24upx;
    height: 24upx;
    margin-right: 8upx;
}

.service-more image,.goods-attr-more image,.pt-rule-more image,.comment-more image {
    width: 16upx;
    height: 26upx;
}

.goods-attr {
    height: 100upx;
    padding: 0 24upx;
    background-color: #ffffff;
    border-top: 1upx solid #f7f7f7;
}

.goods-attr-title {
    width: 128upx;
    font-size: 13pt;
    color: #353535;
}

.goods-attr-value {
    font-size: 11pt;
    color: #666666;
}

.pt-goods-rule {
    height: 80upx;
}

.friend-group {
    padding: 0 24upx;
    margin-top: 20upx;
    background-color: #ffffff;
}

.pt-rule-title {
    font-size: 9pt;
    color: #666666;
}

.pt-rule-right {
    font-size: 9pt;
    color: #919191;
    padding-right: 20upx;
}

.friend-group-title {
    margin: 24upx 0 20upx 0;
    font-size: 9pt;
    color: #666666;
}

.friend-group-item {
    height: 100upx;
    background-color: #f6f6f6;
    border-radius: 10upx;
    padding-left: 20upx;
    margin-bottom: 10upx;
}

.friend-corver-pic image {
    width: 80upx;
    height: 80upx;
    margin-right: 16upx;
    border-radius: 40upx;
}

.friend-name {
    width: 210upx;
    font-size: 11pt;
    color: #353535;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    padding-right: 30upx;
}

.group-short {
    font-size: 18upx;
    color: #ff5c5c;
}

.group-short-time {
    font-size: 18upx;
    color: #707070;
}

.go-offered {
    width: 140upx;
    height: 100%;
    background-color: #ff5c5c;
    color: #ffffff;
    font-size: 9pt;
    margin-left: 36upx;
}

.goods-comment {
    padding: 0 24upx;
    background-color: #ffffff;
    margin-top: 16upx;
}

.goods-comment-title {
    height: 80upx;
    font-size: 9pt;
    color: #919191;
}

.comment-user-pic image {
    width: 66upx;
    height: 66upx;
    border-radius: 33upx;
    margin-right: 20upx;
}

.goods-comment-item {
    border-top: 1upx solid #e2e2e2;
    padding-bottom: 36upx;
}

.goods-comment-user {
    margin-top: 32upx;
}

.comment-user-name {
    font-size: 11pt;
    color: #353535;
}

.goods-comment-conent {
    font-size: 10pt;
    color: #353535;
    margin: 20upx 0;
    line-height: 1.3;
}

.goods-comment-ginfo {
    font-size: 9pt;
    color: #919191;
    margin-bottom: 16upx;
}

.pt-goods-content {
    margin-top: 16upx;
}

.pt-goods-content-title {
    height: 80upx;
    background-color: #ffffff;
    padding: 0 24upx;
    color: #666666;
    font-size: 11pt;
    border-bottom: 1upx solid #e2e2e2;
}

.pt-goods-details {
    box-sizing: border-box;
    padding: 0 0 110upx 0;
    background: #fff;
    overflow-x: hidden;
}

.shop-car {
    position: fixed;
    right: 24upx;
    top: 60upx;
    z-index: 999;
}

.shop-car image {
    width: 86upx;
    height: 86upx;
}

.goods-footer-icon {
    background-color: #ffffff;
    border-right: 1upx solid #e2e2e2;
    width: 110upx;
}

.alone-buy {
    background-color: #feeeee;
    font-size: 9pt;
    color: #ff5c5c;
    width: 226upx;
}

.alone-buy>.money,.group-buy>.money {
    font-size: 12pt;
}

.group-buy {
    color: #ffffff;
    font-size: 9pt;
    background-color: #ffa360;
    background: -webkit-gradient(linear,left top,right bottom,color-stop(0%,#ffa360),color-stop(140%,#ff5c5c));
    background-image: linear-gradient(140deg,#ffa360,#ff5c5c);
    width: 564upx;
}

.number-input-box {
    height: 70upx;
}

.number-input-box .number-input {
    height: 70upx!important;
    border: none;
    text-align: center;
    width: 120upx;
    background: #eee;
    margin: 0 4upx!important;
}

.number-input-box .number-btn {
    height: 100%!important;
    width: 70upx;
    background: #eee;
}

.number-input-box .number-btn.disabled {
    background: #f6f6f6;
    color: #aaa;
}

.comment-pic-shell {
    width: 160upx;
    height: 160upx;
    border-radius: 4upx;
    margin-right: 16upx;
    overflow: hidden;
    display: inline-block;
}

.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.0);
    z-index: 1000;
    transform: translateY(100%);
    transition: background 250ms;
}

.share-modal .share-modal-body {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    width: 100%;
    background: #f2f2f2;
    padding-top: 60upx;
    transform: translateY(100%);
    transition: transform 250ms;
}

.share-modal.active {
    transform: translateY(0);
    background: rgba(0,0,0,.5);
}

.share-modal.active .share-modal-body {
    transform: translateY(0);
}

.share-modal .share-bottom {
    text-align: center;
    font-size: 9pt;
    margin: 0;
    padding: 0;
    margin-bottom: 60upx;
    line-height: inherit;
    border: none;
    background: none;
    color: inherit;
    font-family: inherit;
    display: inline-block;
}

.share-modal .share-bottom:after {
    display: none;
}

.share-modal .share-bottom image {
    width: 120upx;
    height: 120upx;
    margin-bottom: 12upx;
    border-radius: 999upx;
    border: 1upx solid #eee;
}

.share-modal .share-bottom:active image {
    opacity: .7;
}

.share-modal .share-modal-close {
    background: #fff;
    height: 100upx;
    border-top: 1upx solid #eee;
}

.goods-qrcode-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0,0,0,.5);
    padding: 40upx;
    transform: translateY(100%);
    opacity: .5;
    transition: opacity 250ms;
    visibility: hidden;
}

.goods-qrcode-modal.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.goods-qrcode-body {
    background: #fff;
    height: 100%;
    border-radius: 10upx;
    z-index: 99999;
}

.goods-qrcode-modal .goods-qrcode-box {
    height: 100%;
    position: relative;
    box-shadow: 0 0 15upx rgba(0,0,0,.15);
}

.goods-qrcode-modal .goods-qrcode-loading {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

.goods-qrcode-modal .goods-qrcode {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    display: none;
}

.goods-qrcode-modal .goods-qrcode.active {
    display: block;
}

.goods-qrcode-modal .goods-qrcode-close {
    position: absolute;
    top: 40upx;
    right: 40upx;
    padding: 15upx;
}

.float-icon {
    bottom: 170upx!important;
}

.act-modal {
    position: fixed;
    left: 0;
    top: var(--window-top);
    width: 100%;
    height: 100%;
    z-index: 2001;
    visibility: hidden;
    opacity: 0;
    transition: 200ms;
}

.act-modal.show {
    visibility: visible;
    opacity: 1;
}

.act-modal .act-modal-bg {
    background: rgba(0,0,0,0.5);
    position: fixed;
    left: 0;
    top: var(--window-top);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.act-modal .act-modal-pic {
    background: rgba(0,0,0,0.25);
    position: fixed;
    left: 0;
    top: var(--window-top);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.act-modal .act-modal-close image {
    width: 50upx;
    height: 50upx;
    margin-top: 50upx;
}

.model-award {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.act-modal-start {
    position: relative;
    height: 730upx;
}

.pt-modal {
    color: #000000;
    width: 650upx;
    background-color: #ffffff;
    border-radius: 16upx;
    position: relative;
}

.pt-modal-1 {
    padding-top: 28upx;
    font-size: 13pt;
    color: #353535;
}

.pt-modal-2 {
    padding-top: 6upx;
    color: #999999;
    font-size: 10pt;
}

.pt-modal-3 {
    border-bottom: 1upx solid #e2e2e2;
    margin: 24upx 0;
}

.pt-modal-4 {
    position: absolute;
    top: 24upx;
    right: 24upx;
}

.pt-modal-4 image {
    height: 50upx;
    width: 50upx;
}

.pt-modal-5 {
    margin: 0 24upx 40upx 24upx;
}

.pt-modal-6 {
    height: 100upx;
    border-radius: 10upx;
    background: #f6f6f6;
    margin-bottom: 10upx;
}

.pt-modal-7 {
    width: 80upx;
    margin-left: 20upx;
    margin-right: 24upx;
}

.pt-modal-7 image {
    height: 80upx;
    width: 80upx;
    border-radius: 40upx;
}

.pt-modal-bj {
    overflow: hidden;
    height: 100%;
}

.left {
    width: 14upx;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 120upx;
    border-bottom: 4upx solid #ff5c5c;
}

.recommend {
    text-align: center;
    position: relative;
}
</style>
